<template>
  <div class="page-container">
    <el-form :inline="true" :model="formData.queryParams" class="demo-form-inline">
      <el-form-item label="活动名称" class="longInput">
        <el-input
          v-model="formData.queryParams.name"
          placeholder="请输入活动名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="发布状态">
        <el-select
          v-model="formData.queryParams.state"
          placeholder="请选择用户状态"
          clearable
        >
          <el-option
            v-for="item in stateDict"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>

<!--      <el-form-item label="开始时间" style="width: 210px">-->
<!--        <el-date-picker-->
<!--          v-model="formData.queryParams.startTime"-->
<!--          type="date"-->
<!--          placeholder="开始时间"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="结束时间" style="width: 210px">-->
<!--        <el-date-picker-->
<!--          v-model="formData.queryParams.endTime"-->
<!--          type="date"-->
<!--          placeholder="结束时间"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="reactiveData.initList">查询</el-button>
      </el-form-item>
    </el-form>


    <div class="ElTableTool">
      <el-button type="primary" plain @click="dialogData.createUser" :icon="Plus">新增</el-button>
      <el-button type="primary" plain @click="dialogData.createUser" :icon="Edit">编辑</el-button>
      <el-button type="primary" plain @click="dialogData.createUser" :icon="Delete">删除</el-button>

    </div>
    <ElTable :data="reactiveData.tableData" border stripe highlight-current-row>
      <ElTableColumn type="index" label="序号" width="60" align="center" :index="(index)=>{return index+1}" > </ElTableColumn>
      <ElTableColumn prop="jurisdiction" label="归属地"> </ElTableColumn>
      <ElTableColumn prop="name" label="页面名称"> </ElTableColumn>
      <ElTableColumn prop="name" label="页面描述"> </ElTableColumn>
      <ElTableColumn prop="tj" label="状态" align="center" width="60">
        <template #default="scope">
          <span v-if="scope.row.tj" class="round blue"></span>
          <span v-else class="round"></span>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="startTime" label="开始时间"> </ElTableColumn>
      <ElTableColumn prop="endTime" label="结束时间"> </ElTableColumn>
<!--      <ElTableColumn prop="sj" label="上架" align="center" width="60">-->
<!--        <template #default="scope">-->
<!--          <span v-if="scope.row.sj" class="round blue"></span>-->
<!--          <span v-else class="round"></span>-->
<!--        </template>-->
<!--      </ElTableColumn>-->
      <ElTableColumn label="模块设置" align="center" width="90">
        <template #default="scope">
          <el-button :icon="Setting" size="small" type="primary" @click="reactiveData.rowEdit(scope.row)">设置</el-button>
        </template>
      </ElTableColumn>
      <ElTableColumn label="预览(小程序)" align="center" width="120">
        <template #default="scope">
          <el-button :icon="View" size="small" type="primary" @click="reactiveData.rowView(scope.row)">查看</el-button>
        </template>
      </ElTableColumn>
      <ElTableColumn label="预览(PC)" align="center" width="90">
        <template #default="scope">
          <el-button :icon="View" size="small" type="primary" @click="reactiveData.rowView(scope.row)">查看</el-button>
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作">
        <template #default="scope">
          <el-button type="primary" link @click="()=>{}">发布</el-button>
          <el-button type="primary" link @click="()=>{}">编辑</el-button>
          <el-button type="primary" link @click="()=>{}">查看</el-button>
        </template>
      </ElTableColumn>
    </ElTable>

    <ElPagination
      :current-page="formData.queryParams.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="formData.queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="reactiveData.pageTotal"
      @size-change="reactiveData.handleSizeChange"
      @current-change="reactiveData.handleCurrentChange"
    />

    <el-dialog
      v-if="dialogData.dialogVisible"
      v-model="dialogData.dialogVisible"
      :title="dialogData.isCreateMode ? '新增用户' : '修改用户'"
      width="80%"
      top="8vh"
    >
      <createUser
        v-model="dialogData.dialogVisible"
        :row="dialogData.curRow"
        :is-create-mode="dialogData.isCreateMode"
        @onFinish="
          () => {
            reactiveData.initList()
            dialogData.dialogVisible = false
          }
        "
      />
    </el-dialog>

    <el-dialog v-model="dialogData.dataViewDialog" title="查看信息" width="80%" top="8vh">
      <div class="dataView cf">
        <div class="item">
          <span class="str">账号</span>
          <p>{{ dialogData.curRow.loginName }}</p>
        </div>
        <div class="item">
          <span class="str">姓名</span>
          <p>{{ dialogData.curRow.realName }}</p>
        </div>
        <div class="item">
          <span class="str">手机号</span>
          <p>{{ dialogData.curRow.tel }}</p>
        </div>
        <div class="item">
          <span class="str">职务</span>
          <p>{{ dialogData.curRow.post }}</p>
        </div>
        <div class="item">
          <span class="str">用户类型</span>
          <p>{{ useGlobal.userType[dialogData.curRow.userType] }}</p>
        </div>
        <div class="item">
          <span class="str">状态</span>
          <p>{{ useGlobal.userState[dialogData.curRow.userState] }}</p>
        </div>
        <div class="item">
          <span class="str">部门</span>
          <p>{{ dialogData.curRow.departmentName }}</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogData.dataViewDialog = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { Setting, View, Plus, Edit, Delete } from '@element-plus/icons-vue'

import axios from '@/utils/axios'
import useGlobal from '@/utils/globalDict'
import createUser from './createUser.vue'

import deptTree from './deptTree.json'
import userList from './userList.json'

const stateDict = [
  { key: 1, value: '启用' },
  { key: 2, value: '禁用' }
]


// export default defineComponent({
//   name: 'CgParkingLotNotice',
//   components: {
//     createUser
//   },
//   setup() {
    // dialog
    const dialogData = reactive({
      dataViewDialog: false,
      curRow: {
        loginName: '',
        realName: '',
        tel: '',
        // departmentId: '',
        post: '',
        passwd: '',
        userState: '',
        departmentName: '',
        userType: '',
      },
      dialogVisible: false, // 新增用户
      isCreateMode: false,
      createUser() {
        dialogData.curRow = {
          loginName: '',
          realName: '',
          tel: '',
          // departmentId: '',
          post: '',
          passwd: '',
          userState: '',
          departmentName: '',
          userType: '',
        }
        dialogData.isCreateMode = true
        dialogData.dialogVisible = true
      }
    })

    // formData
    const formData = reactive({
      departmentVal: [],
      options: deptTree.result || [],
      props1: {
        value: 'id',
        label: 'departmentName',
        checkStrictly: true
      },
      queryParams: {
        name: '', // 名称
        startTime: '',  // 开始时间
        endTime: '',  // 结束时间
        state:'',

        // departmentId: '', // 	部门ID
        // userState: '', // 用户状态
        // userType: '', // 用户类型
        // queryParam: '', // 关键字(公示单编号，车牌号)
        pageNum: 1,
        pageSize: 10
      },
      getTree() {
        axios.get('/dept/tree').then((res: any) => {
          if (res.success && res.result) {
            formData.options = res.result
          }
        })
      }
    })
    // formData.getTree()

    // table
    const reactiveData = reactive({
      // 修改
      rowEdit: (row: any) => {
        dialogData.isCreateMode = false
        dialogData.curRow = row

        dialogData.dialogVisible = true
      },
      // 查看
      rowView: (row: any) => {
        dialogData.curRow = row
        dialogData.dataViewDialog = true
      },
      tableData: userList.result.list|| [],

      handleSizeChange(val: number) {
        // console.log(`每页 ${val} 条`)
        formData.queryParams.pageNum = 1
        formData.queryParams.pageSize = val
        reactiveData.tableData = []
        reactiveData.initList()
      },
      handleCurrentChange(val: number) {
        formData.queryParams.pageNum = val
        reactiveData.tableData = []
        reactiveData.initList()
      },
      pageTotal: userList.result.total || 0,

      initList() {
        // const idArr = formData.departmentVal
        // if (idArr && idArr.length) {
        //   formData.queryParams.departmentId = idArr[idArr.length - 1]
        // }

        axios.get('/user/list', { params: formData.queryParams }).then((res: any) => {
          if (res.success && res.result) {
            reactiveData.tableData = res.result.list
            reactiveData.pageTotal = res.result.total

          }
        })
      }
    })
    // reactiveData.initList()

    // return {
    //   ...toRefs(formData),
    //   ...toRefs(reactiveData),
    //   ...toRefs(dialogData),
    //
    //   useGlobal
    // }
  // }
// })
</script>

<style scoped lang="stylus">
.round{
  width: 15px
  height: 15px
  display: inline-block;
  -webkit-border-radius: 50%
  -moz-border-radius: 50%
  border-radius: 50%
  background-color: #898989

  &.blue{
    background-color: #1dc9b7;
    background-image: linear-gradient(250deg, rgba(16, 112, 102, 0.7), transparent);
  }
}

.page-container{
  .ElTableTool{
    padding-bottom: 10px
    text-align: right;
  }
  //.createBtn{ float: right;}
}
  .el-pagination{
    margin: 10px 0;
    padding: 10px 0;
    justify-content center
    //text-align: center;
    //width:100%
  }
//.dialogWrap{
//  .el-form-item{
//    //display block
//    //width:300px
//  }
//}

.dataView{
  margin-top: -20px
  margin-bottom: 10px

  .item{
    padding: 15px 5px;
    float: left;
    width: 300px
    line-height: 1.4
    font-size:16px

    .str{
      float: left;
      margin-right: 5px
      width: 65px
      padding-right: 20px
      text-align: right;
      color: #999
    }
    p{
      font-weight: bold;
      overflow: hidden;
    }
  }
}

:deep(.el-dialog__body){
  padding-bottom:0
}
:deep(.el-dialog__footer){
  text-align: center
}
</style>
